<template>
  <k-view class="search-bar">
    <k-view class="search-bar-input" @click="goSearchPage">
      <k-view class="left-area">
        <k-image class="left-icon" :src="searchIcon"></k-image>
        <k-text class="placeholder-text">{{ currentName }}</k-text>
      </k-view>
      <k-view class="right-area">
        <k-text class="right-line"></k-text>
        <k-text class="right-text">{{ rightText }}</k-text>
      </k-view>
    </k-view>
  </k-view>
</template>

<script>
import searchIcon from '@/assets/index/search-icon.png';
import { jumpByUrl } from '@/utils';
import { getHotStockList } from '@/apis';
import Apis from '@king-fisher/apis';
import { sendClickStat } from '@/utils/stat';
import { PAGEID } from '@/config/stat';

export default {
  props: {
    authType: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      searchIcon,
      leftText: '搜索',
      rightText: '搜索',
      placeholderText: '新能源汽车',
      carouselList: [],
      currentName: '',
      currentIndex: 0,
      timer: null,
      bgColor: '',
      color: '',
    };
  },
  methods: {
    goSearchPage() {
      sendClickStat(`${PAGEID.INDEX}.search.click`);
      jumpByUrl({ name: 'search' });
    },
    async getHotStockData() {
      const res = await getHotStockList();
      if (res.status_code !== 0) {
        Apis.Toast.show('暂未查询到热股相关信息');
        return;
      }
      const dataList = res.data.stock_list.splice(0, 10);
      this.carouselList = dataList;
      if (this.carouselList.length > 0) {
        this.currentName = this.carouselList[0].name;
        this.currentIndex = 1;
        this.timer = setInterval(this.setIntervalName, 3000);
      }
    },
    setIntervalName() {
      this.carouselList.forEach((item, index) => {
        if (this.currentIndex === index) {
          this.currentName = item.name;
        }
      });
      this.currentIndex = this.currentIndex + 1;
      if (this.currentIndex === this.carouselList.length) {
        this.currentIndex = 0;
      }
    },
  },
  mounted() {
    this.getHotStockData();
  },
  beforeDestroy() {
    this.timer = null;
  },
  watch: {
    authType: {
      handler(nVal) {
        [this.bgColor, this.color] = nVal === 2 ? ['', '#262626'] : ['#ff2436', '#ff2436'];
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less">
.search-bar {
  width: 100%;
  padding: 0 20px 32px;
  background-color: v-bind(bgColor);

  .search-bar-input {
    height: 64px;
    padding: 14px 16px 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    border-radius: 12px;

    .left-area {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .left-icon {
        width: 44px;
        height: 44px;
        margin-right: 8px;
      }

      .left-text {
        margin-right: 8px;
      }

      .placeholder-text {
        font-size: 28px;
        color: #b3b3b3;
      }

      .carousel {
        height: 64px;
        width: 200px;
      }

      .carousel-track {
        top: 12px;
        left: 12px;
      }
    }

    .right-area {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .right-line {
        width: 1px;
        height: 26px;
        border-left: 1px solid #b3b3b3;
        margin-right: 16px;
      }

      .right-text {
        color: v-bind(color);
      }
    }
  }
}
</style>
